<template>
  <stat class="stat-circle" :title="`${day} / 7`" :subtitle="sub" :axis="axis">

    <div class="stat-circle_body">
      <i class="iconfont k" @click="click(vals[0],1)"
         :class="{'o1':t&&vals[0]>=max,'o2':!t&&vals[0]>=max,'icon-ok':vals[0]>=max,'icon-kaixin':vals[0]<max&&vals[0]>=0,'icon-wenhao':vals[0]===-1}"></i>
      <i class="iconfont k" @click="click(vals[1],1)"
         :class="{'o1':t&&vals[1]>=max,'o2':!t&&vals[1]>=max,'icon-ok':vals[1]>=max,'icon-kaixin':vals[1]<max&&vals[1]>=0,'icon-wenhao':vals[1]===-1}"></i>
      <i class="iconfont k" @click="click(vals[2],2)"
         :class="{'o1':t&&vals[2]>=max,'o2':!t&&vals[2]>=max,'icon-ok':vals[2]>=max,'icon-kaixin':vals[2]<max&&vals[2]>=0,'icon-wenhao':vals[2]===-1}"></i>
      <i class="iconfont k" @click="click(vals[3],3)"
         :class="{'o1':t&&vals[3]>=max,'o2':!t&&vals[3]>=max,'icon-ok':vals[3]>=max,'icon-kaixin':vals[3]<max&&vals[3]>=0,'icon-wenhao':vals[3]===-1}"></i>
      <i class="iconfont k" @click="click(vals[4],4)"
         :class="{'o1':t&&vals[4]>=max,'o2':!t&&vals[4]>=max,'icon-ok':vals[4]>=max,'icon-kaixin':vals[4]<max&&vals[4]>=0,'icon-wenhao':vals[4]===-1}"></i>
      <i class="iconfont k" @click="click(vals[5],5)"
         :class="{'o1':t&&vals[5]>=max,'o2':!t&&vals[5]>=max,'icon-ok':vals[5]>=max,'icon-kaixin':vals[5]<max&&vals[5]>=0,'icon-wenhao':vals[5]===-1}"></i>
      <i class="iconfont k" @click="click(vals[6],6)"
         :class="{'o1':t&&vals[6]>=max,'o2':!t&&vals[6]>=max,'icon-ok':vals[6]>=max,'icon-kaixin':vals[6]<max&&vals[6]>=0,'icon-wenhao':vals[6]===-1}"></i>
    </div>
  </stat>
</template>

<script>
import Stat from './Stat.vue'
import {WEEK_AXIS} from '@/helper/share'
import {Toast} from 'vant'

export default {
  components: {
    Stat
  },
  props: {
    info: {
      type: Array
    },
    max: {
      type: Number
    }
  },
  data() {
    const day = new Date().getDay()
    return {
      day: day || 7,
      sub: 'This Week',
      axis: WEEK_AXIS,
      t: true
    }
  },
  computed: {
    vals() {
      return this.info.map(value => {
        if (value.drink === null) {
          return -1;
        } else {
          return value.drink;
        }
      });
    }
  },
  methods: {
    click(v, i) {
      var toDay = new Date().toLocaleDateString().replaceAll('/', '-');
      let msg = toDay === this.info[i].time ? '今天' : this.info[i].time;
      if (v >= this.max) {
        this.t = !this.t
        Toast({
          message: msg + " ✅"
        })
      } else if (v < this.max && v >= 0) {
        Toast({
          message: msg + " 没有完成哦❕"
        })
      } else {
        if (toDay === this.info[i].time) {
          Toast({
            message: "今天还没开始喝水呢👀"
          })
        } else {
          Toast({
            message: "还没开始👀"
          })
        }

      }
    }
  }
}
</script>

<style lang="less">

.stat-circle_body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
}

@keyframes rotate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotate2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.0);
  }
}

.o1 {
  animation: rotate cubic-bezier(.76, -0.51, .29, 1.5) .5s forwards;
}

.o2 {
  animation: rotate2 cubic-bezier(.76, -0.51, .29, 1.5) .5s forwards;
}

.iconfont {
  &.icon-ok.k {
    color: @success2-color;
    font-size: 25px;
    opacity: 0.9;
  }

  &.icon-kaixin.k {
    color: deepskyblue;
    opacity: 0.9;
    font-size: 25px;
  }

  &.icon-wenhao.k {
    color: slategrey;
    opacity: 0.9;
    font-size: 25px;
  }
}


</style>
